<template>
  <div class="swiperBan white_bg">
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item,key) in bannerArry" :key="key">
        <img v-if="item.banner" @click="jumpFind(item,item.picUrl)" v-lazy="item.picUrl">
        <img v-if="!item.banner" v-lazy="item.picUrl">
      </mt-swipe-item>
    </mt-swipe>
    <div class="elliptical white_bg" v-if="divStyle"></div>
  </div>
</template>

<script>
  import {
    Swipe,
    SwipeItem,
    Toast
  } from 'mint-ui';
  import getData2 from '../../service/getData2.js'

  export default {
    name: 'tabImg',
    data() {
      return {
        id: '',
        swiperOption: {
          autoplay: 3000,
          direction: 'horizontal',
          setWrapperSize: true,
          autoHeight: true,
          pagination: '.swiper-pagination',
          debugger: true,
          loop: true,
        }
      }
    },
    props: ["divStyle", "bannerArry"],
    created: function () {

    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {},
    methods: {
      //点击跳转到发现详情
      jumpFind: function (item, img) {
        let self = this;
        if (item.banner.mchtId) {
          let mchtId = item.banner.mchtId
          //查软文
          getData2.newMchtDoc({
            method: 'get',
            "mchtId": mchtId
          },).then(function (rep) {
            if (rep.content.docList != '') {
              self.id = rep.content.docList[0].docId;
              self.$router.push({
                'path': '/findDetail',
                query: {
                  docId: self.id,
                  img: img
                }
              });
            } else {
              Toast({
                message: '暂无详情',
                duration: 1000
              });
            }
            if (rep.respCode != '00') {
              Toast({
                message: rep.errorInfo,
                duration: 1000
              });
            }
          })

        }
      },
    }
  }
</script>
<style>
  .swiperBan {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .swiperBan .swiper-slide img {
    width: 100%;
  }

  .swiperBan {
    position: relative;
    overflow: hidden;
  }

  .elliptical {
    width: 120%;
    height: 3rem;
    position: absolute;
    bottom: -1.5rem;
    left: -10%;
    z-index: 1;
    border-radius: 70%;
  }

  .swiperBan .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 1.6rem;
    height: 1.1rem;
    line-height: 1.1rem;
    right: .667rem;
    left: auto;
    width: 6rem;
    background: rgba(54, 53, 53, .5);
    border-radius: 1rem;
  }

  .swiperBan .swiper-pagination-bullet {
    background: #bab8b8;
    opacity: 1;
  }

  .swiperBan .swiper-pagination-bullet-active {
    background: #ec4e8a;
  }

  .swiperBan .mint-swipe {
    background: #bab8b8;
  }
  .swiperBan .mint-swipe .mint-swipe-items-wrap{
    background-image: url("./images/newMcht.jpg");
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
  }
  .swiperBan .mint-swipe img {
    width: 100%;
    height: 100%;
  }

  .swiperBan .mint-swipe-indicators {
    left: auto;
    right: 0.1rem;
    bottom: 0.15rem !important;
    border-radius: 1rem;
    transform: translateX(0);
  }

  .swiperBan .mint-swipe-indicator {
    background: #fff;
    opacity: 1;
  }

  .swiperBan .mint-swipe-indicator.is-active {
    background: #ec4e8a;
  }

  .swiperBan .mint-swipe-indicator {
    width: 1.1rem;
    height: 0.15rem;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin: 0 0.15rem;
  }
</style>
